<template>
	<view class="profile-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<view class="avatar">
					<text class="avatar-text">{{ userInfo && userInfo.realName ? userInfo.realName.charAt(0) : 'U' }}</text>
				</view>
				<view class="info">
					<text class="name">{{ userInfo ? (userInfo.realName || userInfo.username || '用户') : '' }}</text>
					<text class="role">{{ $store.getters.roleName }}</text>
				</view>
				<view class="edit-btn" @click="editProfile">
					<text>编辑</text>
				</view>
			</view>
		</view>
		
		<!-- 统计信息 -->
		<view class="stats-card" v-if="stats">
			<view class="stats-grid">
				<view class="stat-item">
					<text class="stat-number">{{ stats.totalOrders || 0 }}</text>
					<text class="stat-label">总订单</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ stats.processingOrders || 0 }}</text>
					<text class="stat-label">进行中</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ stats.completedOrders || 0 }}</text>
					<text class="stat-label">已完成</text>
				</view>
				<view class="stat-item" v-if="$store.getters.isTech && stats">
					<text class="stat-number">￥{{ stats.totalEarnings || 0 }}</text>
					<text class="stat-label">总收入</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="goOrderList">
				<view class="menu-icon orders">📋</view>
				<text class="menu-text">我的订单</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="goCreateOrder" v-if="$store.getters.isUser">
				<view class="menu-icon create">➕</view>
				<text class="menu-text">发布需求</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="goEarnings" v-if="$store.getters.isTech">
				<view class="menu-icon earnings">💰</view>
				<text class="menu-text">收入明细</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="goRoleDashboard" v-if="showRoleEntrance">
				<view class="menu-icon dashboard">⚡</view>
				<text class="menu-text">{{ roleEntranceTitle }}</text>
				<text class="menu-arrow">></text>
			</view>
		</view>
		
		<!-- 设置菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="showAbout">
				<view class="menu-icon about">ℹ️</view>
				<text class="menu-text">关于我们</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="showHelp">
				<view class="menu-icon help">❓</view>
				<text class="menu-text">帮助中心</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item logout" @click="handleLogout">
				<view class="menu-icon logout-icon">🚪</view>
				<text class="menu-text">退出登录</text>
				<text class="menu-arrow">></text>
			</view>
		</view>
		
		<!-- 编辑资料弹窗 -->
		<view class="popup-mask" v-if="showEditPopup" @tap="closeEditPopup">
			<view class="edit-popup" @tap.stop>
				<view class="popup-header">
					<text class="popup-title">编辑资料</text>
					<text class="popup-close" @tap="closeEditPopup">×</text>
				</view>
				<view class="popup-content">
					<view class="form-item">
						<text class="label">真实姓名</text>
						<input class="input" v-model="editForm.realName" placeholder="请输入真实姓名" />
					</view>
					<view class="form-item">
						<text class="label">手机号码</text>
						<input class="input" v-model="editForm.phone" placeholder="请输入手机号码" />
					</view>
					<view class="form-item">
						<text class="label">邮箱地址</text>
						<input class="input" v-model="editForm.email" placeholder="请输入邮箱地址" />
					</view>
					<view class="popup-actions">
						<button class="popup-btn cancel" @tap="closeEditPopup">取消</button>
						<button class="popup-btn confirm" @tap="saveProfile">保存</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stats: null,
				editForm: {
					realName: '',
					phone: '',
					email: ''
				},
				showEditPopup: false
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},
			showRoleEntrance() {
				return this.$store.getters.isAdmin || this.$store.getters.isDispatcher || this.$store.getters.isTech
			},
			roleEntranceTitle() {
				if (this.$store.getters.isAdmin) return '管理后台'
				if (this.$store.getters.isDispatcher) return '派单中心'
				if (this.$store.getters.isTech) return '技术员工作台'
				return ''
			}
		},
		onShow() {
			this.loadUserStats()
		},
		methods: {
			async loadUserStats() {
				try {
					const res = await this.$api.getUserStats()
					if (res.code === 200) {
						this.stats = res.data
					}
				} catch (error) {
					uni.showToast({
						title: '加载统计数据失败',
						icon: 'none'
					})
				}
			},
			
			editProfile() {
				if (this.userInfo) {
					this.editForm = {
						realName: this.userInfo.realName || '',
						phone: this.userInfo.phone || '',
						email: this.userInfo.email || ''
					}
				}
				this.showEditPopup = true
			},
			
			closeEditPopup() {
				this.showEditPopup = false
			},
			
			async saveProfile() {
				try {
					await this.$api.updateProfile(this.editForm)
					
					// 更新本地用户信息
					const updatedUser = { ...this.userInfo, ...this.editForm }
					this.$store.commit('setUserInfo', updatedUser)
					
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					
					this.showEditPopup = false
				} catch (error) {
					uni.showToast({
						title: error.message || '保存失败',
						icon: 'none'
					})
				}
			},
			
			goOrderList() {
				uni.switchTab({
					url: '/pages/order/list'
				})
			},
			
			goCreateOrder() {
				uni.navigateTo({
					url: '/pages/order/create'
				})
			},
			
			goEarnings() {
				uni.navigateTo({
					url: '/pages/tech/earnings'
				})
			},
			
			goRoleDashboard() {
				let url = ''
				if (this.$store.getters.isAdmin) {
					url = '/pages/admin/dashboard'
				} else if (this.$store.getters.isDispatcher) {
					url = '/pages/dispatcher/dashboard'
				} else if (this.$store.getters.isTech) {
					url = '/pages/tech/dashboard'
				}
				
				if (url) {
					uni.navigateTo({ url })
				}
			},
			
			showAbout() {
				uni.showModal({
					title: '关于我们',
					content: '接单平台 v1.0.0\n专业的技术服务平台\n为用户和技术员搭建桥梁',
					showCancel: false
				})
			},
			
			showHelp() {
				uni.showModal({
					title: '帮助中心',
					content: '如有问题请联系客服\n电话：400-123-4567\n邮箱：support@example.com',
					showCancel: false
				})
			},
			
			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								await this.$store.dispatch('logout')
								uni.reLaunch({
									url: '/pages/login/login'
								})
							} catch (error) {
								// 即使接口失败也执行退出
								this.$store.commit('clearAuth')
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.profile-container {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	.user-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		color: #fff;
		
		.user-info {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				background: rgba(255, 255, 255, 0.2);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
				
				.avatar-text {
					font-size: 48rpx;
					font-weight: bold;
				}
			}
			
			.info {
				flex: 1;
				
				.name {
					display: block;
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.role {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
			
			.edit-btn {
				padding: 16rpx 32rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 25rpx;
				font-size: 24rpx;
			}
		}
	}
	
	.stats-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.stats-grid {
			display: flex;
			justify-content: space-around;
			
			.stat-item {
				text-align: center;
				
				.stat-number {
					display: block;
					font-size: 48rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.menu-section {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.logout {
				color: #dc3545;
			}
			
			.menu-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
				font-size: 32rpx;
				
				&.orders {
					background: linear-gradient(45deg, #4ECDC4, #44A08D);
				}
				
				&.create {
					background: linear-gradient(45deg, #FF6B6B, #FF8E53);
				}
				
				&.earnings {
					background: linear-gradient(45deg, #FFD89B, #19547B);
				}
				
				&.dashboard {
					background: linear-gradient(45deg, #667eea, #764ba2);
				}
				
				&.about, &.help {
					background: linear-gradient(45deg, #A8EDEA, #FED6E3);
				}
				
				&.logout-icon {
					background: linear-gradient(45deg, #ff9a9e, #fecfef);
				}
			}
			
			.menu-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.menu-arrow {
				font-size: 32rpx;
				color: #ccc;
			}
		}
	}
	
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	
	.edit-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		max-height: 80vh;
		overflow-y: auto;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.popup-close {
				font-size: 48rpx;
				color: #999;
			}
		}
		
		.popup-content {
			padding: 30rpx;
			
			.form-item {
				margin-bottom: 30rpx;
				
				.label {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 15rpx;
				}
				
				.input {
					width: 100%;
					height: 80rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 10rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					box-sizing: border-box;
				}
			}
			
			.popup-actions {
				display: flex;
				gap: 20rpx;
				margin-top: 40rpx;
				
				.popup-btn {
					flex: 1;
					height: 80rpx;
					border: none;
					border-radius: 40rpx;
					font-size: 28rpx;
					
					&.cancel {
						background: #f0f0f0;
						color: #666;
					}
					
					&.confirm {
						background: #007AFF;
						color: #fff;
					}
				}
			}
		}
	}
</style>